{% extends 'Post/base.html' %}
{% load static %}
{% load highlight %}

{% block main %}


<div id="layout" class="pure-g">


    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="search-form">
            <form class="pure-form" action="{% url 'haystack_search' %}">
                <input type="text" class="pure-input-rounded" name="q" placeholder="search">
                <button type="submit" class="pure-button submit-button">Search</button>
            </form>
        </div>
        <div class="header">
            <h1 class="brand-title">不会写代码的cxy</h1>
            <h2 class="brand-tagline">记录小生活 叮～</h2>

            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a class="pure-button" href="{% url 'Post:list' %}">
                            <i class="fa fa-home fa-lg"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="pure-button" href="#">小黑屋</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="button-form">
            {% if post_list.has_previous %}
                <a class="pure-button button-left" href="?page={{ post_list.previous_page_number }}">
                    <i class="fa fa-arrow-circle-left fa-inverse">上一页</i>
                </a>
            {% else %}
                <a class="pure-button pure-button-disabled button-left">
                    <i class="fa fa-arrow-circle-left fa-inverse">上一页</i>
                </a>
            {% endif %}

            {% if post_list.has_next %}
                <a class="pure-button button-right" href="?page={{ post_list.next_page_number }}">
                    <i class="fa fa-arrow-circle-right fa-inverse">下一页</i>
                </a>
            {% else %}
                <a class="pure-button pure-button-disabled button-right">
                    <i class="fa fa-arrow-circle-right fa-inverse">下一页</i>
                </a>
            {% endif %}
        </div>
    </div>

    <div class="content pure-u-1 pure-u-md-3-4">
        <div>
            <!-- A wrapper for all the blog posts -->
            {% if query %}
                {% for result in page.object_list %}
                    <div class="posts">
                        <h1 class="content-subhead">
                            {{ result.object.category.name }}
                            <a class="read-more" href="{% url 'Post:detail' result.object.id %}">
                                阅读更多
                            </a>
                        </h1>

                        <!-- A single blog post -->
                        <section class="post">
                            <header class="post-header">
                                <img width="48" height="48" alt="Tilo Mitra&#x27;s avatar" class="post-avatar"
                                     src="{% static 'Post/img/favicon.jpg' %}">

                                <h2 class="post-title">{% highlight result.object.title with query %}</h2>

                                <p class="post-meta">
                                <i class="fa fa-thumbs-o-up fa-fw"></i>{{ result.object.good }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="fa fa-eye fa-fw"></i>{{ result.object.views }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="fa fa-clock-o fa-fw"></i>{{ result.object.modified_time }}
                            </p>
                            </header>

                            <div class="post-description">
                                <p>
                                    {% highlight result.object.body with query %}
                                </p>
                            </div>
                        </section>
                    </div>
                {% empty %}
                    没有找到诶T T
                {% endfor %}

            {% endif %}
            <div class="footer">
                <div class="pure-menu pure-menu-horizontal">
                    <ul>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                        <li class="pure-menu-item">
                            <a href="https://github.com/ChuXiaoYi?tab=repositories" class="pure-menu-link">
                                <i class="fa fa-github fa-fw"></i>
                                GitHub
                            </a>
                        </li>
                        <li class="pure-menu-item"><a href="https://blog.csdn.net/weixin_40156487"
                                                      class="pure-menu-link">CSDN</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}